<template>
  <div class="wrap">
    <div class="box">
      <div class="main-left">
        <div class="major">
          <div>全校专业报到率排名
            <br>
            <div style="text-align:center">(前 30 名)</div>
          </div>
          <ul class="item-wrap">
            <li class="item-box">
              <span class="ranking bolder">排名</span>
              <span class="college-name bolder">专业简称</span>
              <span class="college-proportion bolder">报到率</span>
            </li>
            <li v-for="(item,index) in major"
                :key="index"
                class="item-box">
              <span class="ranking bold">{{index+variable}}</span>
              <span class="college-name bold">{{item.majorAbbreviation}}</span>
              <span class="college-proportion bold">{{item.rate + "%"}}</span>
            </li>
          </ul>
        </div>
      </div>
      <div class="main-right">
        <div class="arrive-number common">
          <p>当前时间</p>
          <div class="time">{{date}}</div>
          <p>当前报到人数</p>
          <countup :start-val="0"
                   :end-val="comersSum"
                   :duration="2"
                   tag="div"
                   class="animation"></countup>
        </div>
        <div class="code-wrap common">
          <span class="copyright">技术支持&copy;三月软件小组</span>
          <div class="code-box">
            <img src="../../static/img/true-code.png"
                 alt="已报到人数"
                 class="code-img">
          </div>
          <p id="sweep-code">扫描二维码手机查看</p>
        </div>
        <div class="report common">
          <p>各学院报到率</p>
          <div id="showDataBar"
               style="width:100%; height:100%"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      variable: 1,
      comersSum: 0, //报到人数
      begindate: 1567745845, //开始统计时间
      date: 0, //统计时间
      timer: 0,
      //表示其他学院报到率
      name: "其他",
      number: 0,
      major: [], //专业报到率
      spaceTime: 600, //时间间隔
      times: 1567731600 //请求时间
      // 3000	1567818591		4993
      // 4000	1567823869		3551
      // 5000·	1567832280		5759
      // 6000	1567900970
    };
  },
  mounted() {
    this.date = this.timestampToTime(new Date(this.times * 1000));
    // this.showRate();
    this.variable = 1;
    // this.major3 = this.major1;
    this.getData();
  },
  beforeDestroy() {
    clearTimeout(this.timer);
  },
  methods: {
    drawBar() {
      let myChart = this.echarts.init(document.getElementById("showDataBar"));
      let option = {
        grid: {
          containLabel: true,
          left: "5%",
          bottom: "20%",
          top: "8%",
          right: "5%"
        },
        xAxis: {
          type: "category",
          data: this.allName,
          axisLabel: {
            interval: 0,
            rotate: 0,
            textStyle: {
              fontSize: 22,
              fontWeight: "bold"
            }
          }
        },
        yAxis: {
          type: "value",
          data: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
          axisLabel: {
            interval: 0,
            fontSize: 20
          },
          splitLine: {
            show: false
          }
        },
        animationDuration: 1500,
        animationDurationUpdate: 1000,
        series: [
          {
            type: "bar",
            barWidth: 38,
            barGap: "80%",
            markPoint: {
              symbolSize: 68,
              symbolOffset: [0, 10],
              label: {
                fontSize: 25,
                fontWeight: "bold"
              },
              data: [{ type: "max", name: "最大值" }]
            },
            markLine: {
              data: [{ type: "average", name: "平均值" }],
              lineStyle: {
                width: 4,
                fontSize: 16
              }
            },
            itemStyle: {
              normal: {
                color(params) {
                  let colorList = [
                    "#f00",
                    "#00f",
                    "Maroon",
                    "#ee2c79",
                    "#732e12",
                    "Gree",
                    "#f2481b",
                    "#fcd217",
                    "#f6cec1",
                    "#481e1c",
                    "#bacf65",
                    "#2775b6",
                    "#f00",
                    "Navy",
                    "#00f",
                    "#f00"
                  ];
                  return colorList[params.dataIndex];
                }
              }
            },
            data: this.allRate
          }
        ]
      };
      myChart.setOption(option);
    },
    getData() {
      this.axios({
        method: "get",
        url: "/student/getVideo",
        params: {
          index: this.times
        }
      })
        .then(res => {
          console.log(res.data);
          //请求报道人数
          this.comersSum = res.data[0].result.comersSum;
          //请求专业报道
          this.major = [];
          for (let i = 0; i < res.data[1].result.length; i++) {
            res.data[1].result[i].majorAbbreviation = res.data[1].result[
              i
            ].majorAbbreviation.replace("(", "");
            res.data[1].result[i].majorAbbreviation = res.data[1].result[
              i
            ].majorAbbreviation.replace(")", "");
            res.data[1].result[i].majorAbbreviation = res.data[1].result[
              i
            ].majorAbbreviation.replace("（", "");
            res.data[1].result[i].majorAbbreviation = res.data[1].result[
              i
            ].majorAbbreviation.replace("）", "");
            this.major.unshift(res.data[1].result[i]);
          }
          this.major = this.major.splice(0, 15);
          //请求报道率
          this.allName = [];
          this.allRate = [];
          this.arriveNum = [];
          this.noArriveNum = [];
          for (let i = 0; i < res.data[2].result.length; i++) {
            this.allName.push(res.data[2].result[i].name.slice(0, 2));
            this.allRate.push(res.data[2].result[i].rate);
            this.arriveNum.push(res.data[2].result[i].arriveNum);
            this.noArriveNum.push(
              res.data[2].result[i].allNum - res.data[2].result[i].arriveNum
            );
          }
          this.drawBar();
        })
        .catch(error => {
          console.log(error);
        });
    },
    //时间戳转换
    timestampToTime(time) {
      let month = time.getMonth() + 1 + "月";
      let date = time.getDate() + "日,";
      let hour =
        (time.getHours() < 10 ? "0" + time.getHours() : time.getHours()) + ":";
      let minute =
        time.getMinutes() < 10 ? "0" + time.getMinutes() : time.getMinutes();
      return month + date + hour + minute;
    }
  }
};
</script>

<style scoped>
.wrap {
  width: 100vw;
  height: 100vh;
  background: #5283a7;
}
.box {
  width: 97vw;
  height: calc(85vw / 3 * 2);
  margin: 0 auto;
}
.main-left {
  width: 24vw;
  height: calc(85vw / 3 * 2);
  margin: 0 auto;
  float: left;
  display: flex;
  align-content: space-around;
}
.main-right {
  width: 72vw;
  height: calc(84.5vw / 3 * 2);
  margin: 0 auto;
  float: right;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: space-around;
}
.common {
  width: 32%;
  height: 52%;
  background: #fff;
}
.common > p {
  margin: 2vh 0 0 2vh;
  padding-left: 1vh;
  border-left: 0.6vh solid #5d9bd8;
  font-size: 4vh;
  font-weight: bold;
  color: #000;
}
#sweep-code {
  border-left: none;
  padding-right: 1vh;
  border-right: 0.6vh solid #5d9bd8;
  font-size: 4vh;
  position: absolute;
  right: 1.8vh;
  bottom: 2vh;
}
.major {
  margin-top: 6px;
  width: 100%;
  height: 98%;
  background: #fff;
}
.major > div {
  margin: 2vh 0 0 2vh;
  padding-left: 1vh;
  border-left: 0.6vh solid #5d9bd8;
  font-size: 4vh;
  font-weight: bold;
  color: #000;
}

.item-box {
  display: flex;
  text-align: center;
  line-height: 40px;
  justify-content: center;
}
.ranking {
  font-size: 4vh;
  min-width: 3vw;
}
.college-name {
  font-size: 4vh;
  min-width: 12vw;
}
.college-proportion {
  font-size: 4vh;
  min-width: 4vw;
}
.bold {
  font-weight: bold;
}
.bolder {
  margin: 2vh 0;
  font-weight: bolder;
}
.arrive-number {
  width: 63%;
  height: 57%;
}
.report {
  width: 100%;
  height: 40%;
  overflow: hidden;
}
.code-wrap {
  width: 36%;
  height: 57%;
  position: relative;
}
.code-box {
  width: 93%;
  height: 71%;
  position: absolute;
  top: 49%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.code-img {
  width: 100%;
  height: 100%;
}
.time {
  margin-top: 1vh;
  font-size: 5vw;
  color: rgb(0, 0, 140);
  text-align: center;
}
.animation {
  margin-top: 1vh;
  font-size: 15vw;
  color: rgb(0, 0, 140);
  text-align: center;
}
.copyright {
  font-size: 3vh;
  position: absolute;
  top: 4vh;
  left: 50%;
  font-weight: bold;
  white-space: nowrap;
  transform: translate(-50%, -50%);
}
.copyright::before {
  content: "\2764";
  color: rgba(255, 0, 0, 0.6);
  position: relative;
  transition: 0.8s;
  left: -8px;
}
.copyright::after {
  content: "\2764";
  color: rgba(255, 0, 0, 0.6);
  position: relative;
  transition: 0.8s;
  right: -8px;
}
</style>